<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>二级路由</title>
</head>

<body>
    <div id="app">
        <router-link to="/" tag="button">首页</router-link>
        <router-link to="/news">新闻</router-link>
        <router-link to="/books">图书</router-link>
        <router-view></router-view>
    </div>
    <template id="tem1">
        <h2>这是首页</h2>
    </template>
    <template id="tem2">
        <div>
            <!-- 二级路由 -->
            <router-link to="/news/song">娱乐</router-link>
            <router-link to="/news/play">体育</router-link>
            <router-view></router-view>
        </div>
    </template>
    <template id="tem3">
        <h2>这是图书页面</h2>
    </template>
    <template id="tem4">
        <h4>娱乐新闻</h4>
    </template>
    <template id="tem5">
        <h4>体育新闻</h4>
    </template>
</body>

</html>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
    const Home = {
        template: "#tem1"
    }
    const News = {
        template: "#tem2"
    }
    const Books = {
        template: "#tem3"
    }
    const song = {
        template: "#tem4"
    }
    const play = {
        template: "#tem5"
    }
    const routes = [{
        path: "/",
        component: Home
    }, {
        path: "/news",
        component: News,
        /* 配置二级路由 */
        children: [{
            path: "song",
            component: song
        }, {
            path: "play",
            component: play
        }]
    }, {
        path: "/books",
        component: Books
    }]
    const router = new VueRouter({
        routes
    })
    new Vue({
        el: "#app",
        router: router,
    })
</script>